<template>
  <div class="container">
    <el-dialog
      title="设置发票商品信息"
      :visible.sync="dialog.dialogVisible"
      width="90%"
      center
      @open="getData"
      :lock-scroll="true"
      @close="closeDialog"
    >
      <el-select v-model="type" @change="onTypoe" placeholder="请选择状态">
        <el-option
          v-for="item in typeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        v-model="commodity.value"
        filterable
        remote
        center
        reserve-keyword
        placeholder="请选择商品"
        :remote-method="insideCommodityMethod"
        :loading="commodity.loading"
      >
        <el-option
          v-for="item in commodity.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="addGoods"
        >添加</el-button
      >
      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-top: 10px;"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="goods_code"
          label="商品编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_name"
          label="商品名称"
          align="center"
        ></el-table-column>
        <el-table-column prop="invoice_name" label="发票商品名" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.invoice_name"
              placeholder="请输入发票商品名"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="invoice_spec"
          label="发票商品规格"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.invoice_spec"
              placeholder="请输入发票商品规格"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="invoice_unit"
          label="发票商品单位"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.invoice_unit"
              placeholder="请输入发票商品单位"
              clearable
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="remove(scope)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectErpGoodsAllData } from "@/api/suppliersSupermarket/suppliersSupermarketList";
import { goodsOptions } from "@/api/commodity/commodityList"; //商品
import { setInvoiceGoods } from "@/api/bill";
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      tableData: [],
      commodityList: [],
      commodity: {
        options: [],
        value: "",
        loading: false
      },
      type: 1,
      typeList: [{ id: 1, name: "生鲜品" }, { id: 2, name: "商超品" }],
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper"
      }
    };
  },
  created() {},
  methods: {
    getData() {
      // this.getCommodityList();
    },
    //添加
    addGoods() {
      if (this.commodity.value) {
        let arr = this.commodityList.filter(res => {
          return res.code == this.commodity.value;
        });
        if (this.tableData.length > 0) {
          let boolArr = this.tableData.filter(res => {
            return res.goods_code == arr[0].code;
          });
          if (boolArr.length > 0) {
            this.$message({
              message: "该发票商品已添加",
              type: "info"
            });
          } else {
            this.tableData.push({
              goods_code: arr[0].code,
              goods_name: arr[0].name,
              invoice_name: "",
              invoice_spec: "",
              invoice_unit: "",
              supplier_id: 0
            });
          }
        } else {
          this.tableData.push({
            goods_code: arr[0].code,
            goods_name: arr[0].name,
            invoice_name: "",
            invoice_spec: "",
            invoice_unit: "",
            supplier_id: 0
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "请选择商品"
        });
      }
    },
    //删除
    remove(scope) {
      let index = scope.$index;
      this.tableData.splice(index, 1);
    },
    //提交
    confirm() {
      if (this.tableData.length == 0) {
        this.$message({
          message: "请添加发票商品",
          type: "info"
        });
        return;
      }
      let data = {
        type: this.type,
        goods: JSON.stringify(this.tableData)
      };
      setInvoiceGoods(data).then(res => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg || res.message
          });
          this.$emit("upData");
          this.closeDialog();
        }
      });
    },

    //切换类别
    onTypoe(e) {
      console.log(e, 8888);
      this.commodityList = [];
      this.tableData = [];
      this.commodity = {
        options: [],
        value: "",
        loading: false
      };
      // if (e == 1) {
      //   this.getCommodityList();
      // } else {
      //   this.getGoodsData();
      // }
    },
    // 嵌套搜索商品数据
    insideCommodityMethod(query) {
      if (query !== "") {
        if (this.type == 1) {
          this.getCommodityList(query);
        } else {
          this.getGoodsData(query);
        }
      } else {
        this.commodity.options = [];
      }
    },
    getCommodityList(query) {
      let data = {
        search: query,
        page: 1,
        limit: 50
      };
      goodsOptions(data).then(res => {
        this.commodityList = res.data.data;
        this.commodity.options = res.data.data.map(item => {
          return { value: `${item.code}`, label: `${item.name}(${item.code})` };
        });
        this.commodity.loading = false;
      });
    },
    // 商品数据
    getGoodsData(name) {
      let data = {
        page: 1,
        limit: 50,
        goods_code: name
      };
      selectErpGoodsAllData(data).then(res => {
        res.data.paginate.data.forEach(item => {
          item.code = item.Code;
          item.name = item.Name;
        });
        this.commodityList = res.data.paginate.data;
        this.commodity.options = res.data.paginate.data.map(item => {
          return { value: `${item.Code}`, label: `${item.Name}(${item.Code})` };
        });
        this.commodity.loading = false;
      });
    },
    //取消
    closeDialog() {
      this.commodityList = [];
      this.tableData = [];
      this.commodity = {
        options: [],
        value: "",
        loading: false
      };
      this.dialog.dialogVisible = false;
    }
  }
};
</script>
<style scoped></style>
